// 5、组件通讯 父传子、子改父、兄弟通讯

// 子组件无法修改父组件传递的参数，但是可以通过父组件传递回调方法给子组件来修改父组件数据
import './Five.css'

import React, {Component} from 'react';

// 类子组件
class Son1 extends Component {
    // updateMessage = () => {
    //     // 报错 子组件无法直接修改父组件传递的数据
    //     this.props.message = '哈哈'
    // }
    state = {
        // car:{
        //     name:'奔驰',
        //     color:'白色'
        // }
    }
    update = () => {
        this.props.setMessage('父组件传递给子组件方法修改了message')
    }
    render() {
        // 通过props属性获取父组件传递过来的数据
        let { message , span , setMessage , car } = this.props
        // let { car } = this.state
        return (
            <div className='son1'>
                <h3>类子组件</h3>
                <p>{message} {span}</p>
                <button onClick={()=>{setMessage('父组件传递给子组件方法修改了message')}}>修改父组件数据</button>
                <hr/>
                <h4>汽车名称：{car.name}，汽车颜色：{car.color}</h4>

            </div>
        );
    }
}
// 函数式子组件
function Son2(props){
    // 通过对函数定义参数获取父组件传递过来的数据
    let { message , setMessage , setCar } = props
    const update = ()=> {
       setMessage('父组件传递给函数子组件方法修改了message')
    }
    return (
        <div className='son2'>
            <h3>函数式子组件</h3>
            <p>{message}</p>
            <button onClick={update}>修改父组件数据</button>
            <hr/>
            <button onClick={()=>{setCar('宝马','蓝色')}}>修改汽车信息</button>
        </div>
    )
}

// 父组件
class Five extends Component {
    state = {
        message : '父组件数据',
        car:{
            name:'奔驰',
            color:'白色'
        }
    }
    // 修改数据的方法
    setMessage = (msg)=>{
        this.setState(()=>{
            return {
                message: msg
            }
        },()=>{
            console.log(this.state.message)
        })
        // this.setState({
        //     message : msg
        // })
        console.log(this.state.message)
    }
    // 修改汽车信息
    setCar = (name,color)=>{
        this.setState({
            car :{name,color}
        })
    }
    render() {
        let { message , car } = this.state
        return (
            <div className='five'>
                <h2>Five</h2>
                <h3>父组件</h3>
                <p>{message}</p>
                <Son1 car={car} message={message} setMessage={this.setMessage} span={<span>父组件传递JSX</span>}></Son1>
                <Son2 setCar={this.setCar} message={message} setMessage={this.setMessage}></Son2>
            </div>
        );
    }
}

export default Five;
